import React, { useEffect, useState } from 'react';
import *as service from '../../../../api/organization'
import { Button, Table, Drawer, Form, Input, message, Tag, Select } from 'antd'
import type { ColumnsType } from 'antd/es/table';
import { PlusOutlined, ArrowDownOutlined } from '@ant-design/icons'
// import './OfficeManagement.scss'
interface Props {

}
function OfficeManagement(props: Props) {
    interface DataType {
        jobId: number;
        jobName: string;
        jobPersonnel: string;
        timePersonnel: string;
        jobDescription: string;
    }
    var [tableData, setTableData] = useState<DataType[]>([]) //定义表格组件状态--数据
    const [open, setOpen] = useState(false); //定义抽屉开关初始值
    var [form] = Form.useForm() //定义表单
    let [flig, setFlig] = useState(true)//自定义一个开关
    let [id, setid] = useState(0)
    // 发送表格内容请求
    let OfficeManagementlist = async () => {
        let res = await service.office_managelist()
        setTableData(res.data.data)
    }

    // 组件挂载期
    useEffect(() => {
        OfficeManagementlist()
    }, [])

    // 抽屉开
    const showDrawer = () => {
        setOpen(true);
    };
    // 抽屉关
    const onClose = () => {
        setOpen(false);
        form.setFieldsValue({ jobName: '', jobPersonnel: '', timePersonnel: '', jobDescription: '' })
        setFlig(true)
    };

    //数据源
    const columns: ColumnsType<DataType> = [
        {
            title: '序号', //表格列的标题
            render: (_, record) => <a>{tableData.indexOf(record) + 1}</a>,//动态渲染标签/组件
        },
        {
            title: '职务名称', //表格列的标题
            key: 'jobName',
            render: (_, record) => <div>{record.jobName}</div>//动态渲染标签/组件
        },
        {
            title: '在职人数', //表格列的标题
            key: 'jobPersonnel',
            width: '150px',
            render: (_, record) => <div>{record.jobPersonnel}</div>,//动态渲染标签/组件
        },
        {
            title: '全职人数', //表格列的标题
            key: 'timePersonnel',
            render: (_, record) => <div>{record.timePersonnel}</div>,//动态渲染标签/组件
        },
        {
            title: '职务说明', //表格列的标题
            key: 'jobDescription',
            render: (_, record) => <div>{record.jobDescription}</div>,//动态渲染标签/组件
        },
        {
            title: '操作', //表格列的标题
            render: (_, record) => <div>
                <button style={{ color: 'blue', border: "none", backgroundColor: '#fff' , cursor: 'pointer'}} onClick={() => { jobupdata(record) }}>编辑</button>
                &emsp;
                &emsp;
                <button style={{ color: 'red', border: "none", backgroundColor: '#fff' , cursor: 'pointer'}} onClick={() => { jobdelete(record) }}>删除</button>
            </div>,//动态渲染标签/组件
        },
    ]
    //验证通过后的方法
    let onFinish = async (FinishValue: any) => {
        if (flig) {
            let res = await service.office_manageadd(FinishValue)
            if (res.data.code==200) {
                OfficeManagementlist()
                message.success({ content: '添加职务成功' })
                onClose()
            }
        } else {
            let res = await service.office_manageupdata({jobId:id,...FinishValue })
            if (res.data.code==200) {
                OfficeManagementlist()
                message.success({ content: '编辑职务成功' })
                onClose()
            }
        }
    }
    //验证失败时执行
    let onFinishFailed = (FinishFailedValue: any) => {
        console.log(FinishFailedValue)
    }
    // 编辑
    let jobupdata = (record: any) => {
        setid(record.jobId)
        setFlig(false)
        setOpen(true);
        form.setFieldsValue(record)
    }
    //删除
    let jobdelete =async (record: any) => {
        let res =await service.office_managedelete({ jobId: record.jobId })
        if(res.data.code==200){
            OfficeManagementlist()
            message.success({ content: '删除成功' })
        }
    }
    return (
        <div className='OfficeManagement'>
            <h2>职务管理</h2>
            <div className="opts">
                <Button onClick={() => { showDrawer() }} style={{ marginRight: 10 }} type='primary'>新增<PlusOutlined /></Button>
                <Drawer title={flig ? '新增职务' : '修改职务'} placement="right" onClose={onClose} open={open}>
                    <Form
                        className='from'
                        form={form}
                        style={{ maxWidth: 400 }}
                        onFinish={onFinish}
                        onFinishFailed={onFinishFailed}
                    >
                        <Form.Item
                            label="职务名称"
                            name="jobName"
                            rules={[{ required: true, message: '职务名称' }]}
                        >
                            <Input placeholder='请输入职务名称' />
                        </Form.Item>
                        <Form.Item
                            label="在职人数"
                            name="jobPersonnel"
                            rules={[{ required: true, message: '在职人数' }]}
                        >
                            <Input placeholder='请输入在职人数' />
                        </Form.Item>
                        <Form.Item
                            label="全职人数"
                            name="timePersonnel"
                            rules={[{ required: true, message: '全职人数' }]}
                        >
                            <Input placeholder='请输入全职人数' />
                        </Form.Item>

                        <Form.Item
                            label="职务说明"
                            name="jobDescription"
                            rules={[{ required: true, message: '职务说明' }]}
                        >
                            <Input placeholder='请输入职务说明' />
                        </Form.Item>

                        <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                            <Button type="primary" htmlType="submit">
                                {flig ? '新增职务' : "修改职务"}
                            </Button>
                        </Form.Item>
                    </Form>
                </Drawer>
            </div>
            <Table size={'small'} columns={columns} dataSource={tableData} style={{ marginTop: 20 }} rowKey={""} pagination={{ pageSize: 5 }} />
        </div >
    );
}

export default OfficeManagement;